<template>
    <div>
        <div class="datas">
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="客户姓名" prop="name">
                </el-table-column>
                <el-table-column prop="phone" label="电话">
                </el-table-column>
                <el-table-column label="性别">
                    <template #default="{ row }">{{ row.sex | formatSex }}</template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button type="text" size="small" icon="el-icon-edit">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { getCustomerApoi } from '@/api'
export default {
    data() {
        return {
            tableData: []
        }
    },
    created() {
        getCustomerApoi().then(res => {
            if (res.code === 200) {
                this.tableData = res.rows;
            }
        })
    },
    // 解决的问题 ， 渲染的时候 需要处理相对复杂的逻辑，抽离出来
    filters: {
        // 过滤器名称(){
        //     return 过滤结果
        // }
        formatSex(value) {
            let result = ''
            switch (value) {
                case '0':
                    result = '女'
                    break;
                case '1':
                    result = '男'
                    break;
                case '2':
                    result = '保密'
                    break;
                default:
                    break;
            }
            return result;
        }
    }
}
</script>